<template>
  <div>
    <h3 class="title">会员卡列表</h3>
    <div class="toolbar">
      <el-button type="danger" size="small" icon="el-icon-plus" @click="$router.push('add')">添加</el-button>
    </div>
    <xu-table :data="tableData" :options="tableOptions" :pager="pager">
      <template slot="vip" slot-scope="{ row }">
        <el-tooltip :content="row.cate.title">
          <span>{{ row.cate.title }}</span>
        </el-tooltip>
      </template>
      <template slot="name" slot-scope="{ row }">
        <el-tooltip :content="row.name">
          <span>{{ row.name }}</span>
        </el-tooltip>
      </template>
      <template slot="expire" slot-scope="{ row }">{{ row.expire | vip_expire }}</template>
    </xu-table>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import table from '../../../mixins/table'
import { VipCardActionsEnum } from '../../../_/vue/store/vip'
export default {
  mixins: [table],
  data () {
    return {
      tableOptions: [
        { attrs: { label: '所属卡类别', prop: 'vip', width: '120px' } },
        { attrs: { label: '卡名称', prop: 'name' } },
        { attrs: { label: '售价', prop: 'price', width: '80px' } },
        { attrs: { label: '原价', prop: 'origin_price', width: '80px' } },
        { attrs: { label: '有效期', prop: 'expire', width: '80px', align: 'center' } },
        { attrs: { label: '使用说明', prop: 'usage_desc' } },
        { attrs: { label: '权益说明', prop: 'interests_desc' } },
        { attrs: { label: '购买说明', prop: 'buy_desc' } },
        {
          attrs: { label: '操作', prop: 'opt', width: '120px', align: 'center' },
          buttons: [
            {
              label: '编辑',
              type: 'primary',
              icon: 'el-icon-edit',
              click: ({ row }) => {
                this.$router.push({ path: 'add', query: { id: row.id } })
              }
            },
            {
              label: '删除',
              type: 'popover',
              icon: 'el-icon-delete',
              click: ({ row }) => {
                this.delete({ ids: [row.id] })
                this.$message.success('删除成功')
                this.getData()
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    ...mapActions({
      list: VipCardActionsEnum.LIST,
      delete: VipCardActionsEnum.DELETE
    })
  }
}
</script>
